<template>

	<view class="myContainer">
		<view class="backgroundImg">
			<view class="flex-between">
				<view class="realNameStyle">

					<image v-if="personalCenterHeadInfo" class="avaterName"
						:src="personalCenterHeadInfo.merchantLogo?personalCenterHeadInfo.merchantLogo:'../../static/my/Group 3564.png'"
						mode=""></image>
					<image v-else class="avaterName" :src="'../../static/my/Group 3564.png'" mode=""></image>
					<view class="flexColumn">
						<view v-if="personalCenterHeadInfo" style="color: #fff; ">
							{{personalCenterHeadInfo.merchantName?personalCenterHeadInfo.merchantName:'访客'}}
						</view>
						<view v-else style="color: #fff; ">访客</view>

						<view class="flex-start-center" >
							<view style="color: #D1BB7A; " v-if="!personalCenterHeadInfo">
								注册即可获得三天体验
							</view>
							<view style="color: #D1BB7A; " v-else>
								{{merchantId?'到期时间 :&nbsp' +formattedDate(personalCenterHeadInfo.prescription):'注册即可获得三天体验'}}
							</view>
							<view class="currentRenewStatus" v-if="merchantId">
								{{comparisonTime(datePart,currentDates)}}
							</view>
						</view>
					</view>

				</view>
				<view v-if="!merchantId" class="btn_status" @click="openStore">
					开通店铺
				</view>
				<view v-else class="btn_status" @click="renewFn">
					续费
				</view>

			</view>
		</view>

		<!-- 数据面板 -->
		<view class="dataCard">
			<view class="flex-between">
				<view class="fontSize">
					<text>当前点数</text>
					<text v-if="personalCenterHeadInfo" class="zero">{{personalCenterHeadInfo.counts}}</text>
					<text v-else class="zero">----</text>

				</view>
				<view class="fontSize">

					<text @click="pointDetails">点数明细</text>
					<uni-icons type="right" color='#fff' size="30"></uni-icons>
				</view>
			</view>
			<view class="applicationInfo">
				<view class="Divider">
					<span>今日使用</span>
					<view v-if="personalCenterHeadInfo">{{personalCenterHeadInfo.todaySyCounts}}</view>
					<view v-else>----</view>

				
				</view>
				<view class="boder">

				</view>
				<view class="Divider">
					<span>累计使用</span>
					<view v-if="personalCenterHeadInfo">{{personalCenterHeadInfo.totalSyCounts}}</view>
					<view v-else>----</view>

				</view>
				<view class="boder">

				</view>
				<view style="border-right: none" class="Divider">
					<span>累计充值</span>
					<view v-if="personalCenterHeadInfo">{{personalCenterHeadInfo.totalCzCounts}}</view>
					<view v-else>----</view>

				</view>
			</view>
		</view>
		<!-- 曲线图 -->

		<view class="graphCard" v-if="merchantId">
			<view style="margin-bottom: 15rpx;">
				使用点数7天曲线图
			</view>
			<qiun-data-charts class="charts" type="area" :opts="opts" :chartData="chartData" />
		</view>

		<view class="tabCard">
			<view v-for="(item,i) in list" :key="i">

				<view @click="goTab(item)" class=" comprehensiveScoreList flex-between" v-if="(item.text=='退出登录'&&merchantId)"
					>
					<view class="flex" >
						<image class="avater" :src="item.img" mode=""></image>
						<view class="rightContent">
							<view class="authorizationTitle">
								{{item.text}}

							</view>


						</view>
					</view>
				
					<view v-if="item.pcCopy" class="btnFinish flex" @click="codyLink()">
						复制
						<!-- <span style="color:#D9D9D9;font-size: 14px;">已经完成</span> -->
						<image class="codyImg" src="../../static/cody.png" mode=""></image>
					</view>
					<view v-else class="btnFinish flex">
						<!-- <span style="color:#D9D9D9;font-size: 14px;">已经完成</span> -->
						<image class="arrowImg" src="../../static/my/Group 2250.png" mode=""></image>
					</view>

				</view>
				<view @click="goTab(item)" class=" comprehensiveScoreList flex-between" v-if="(item.text!='退出登录')"
					>
					<view class="flex" >
						<image class="avater" :src="item.img" mode=""></image>
						<view class="rightContent">
							<view class="authorizationTitle">
								{{item.text}}
				
							</view>
				
				
						</view>
					</view>
				
					<view v-if="item.pcCopy" class="btnFinish flex" @click="codyLink()">
						复制
						<!-- <span style="color:#D9D9D9;font-size: 14px;">已经完成</span> -->
						<image class="codyImg" src="../../static/cody.png" mode=""></image>
					</view>
					<view v-else class="btnFinish flex">
						<!-- <span style="color:#D9D9D9;font-size: 14px;">已经完成</span> -->
						<image class="arrowImg" src="../../static/my/Group 2250.png" mode=""></image>
					</view>
				
				</view>
			</view>
		</view>

		<sunui-popup ref="renew">
			<template v-slot:content>

				<!-- 关闭按钮进行定位 -->
				<view class="renewPopup">
					<view class="headTitle">
						联系代理给您续费
					</view>
					<view class="contentTitle flex">
						<image class="iconPhone" src="../../static/phone.png" mode=""></image>
						<view style="color: #1E6CEB; margin-left: 15rpx; font-weight: 700; font-size: 36rpx;">
							13037465405
						</view>
					</view>
					<view class="contentFooter flex-between">
						<view class="cancel flex" @click="cancelFn()">
							取消
						</view>
						<view style="color: #F6F6F6;">
							|
						</view>
						<view class="confirm flex">
							拨打
						</view>
					</view>
				</view>

			</template>
		</sunui-popup>


	</view>

</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {

				list: [{
						img: '../../static/my/Group 2253.png',
						text: '商户信息管理',

						url: '/pages/merchantConfiguration/merchantConfiguration',


					},
					{
						img: '../../static/my/Group 2252.png',
						text: '点数明细',

						url: '/pages/index/pointDetails',


					},
					{
						img: '../../static/my/Frame.png',
						text: '员工管理',

						url: '/pages/index/employeeManagement',

					},
					{
						img: '../../static/my/Group 2255.png',
						text: '帮助中心',

						url: '/pages/index/helpCenter',

					},
					{
						img: '../../static/my/Frame-1.png',
						text: '法律申明',

						url: '/pages/index/legalStatement',

					},
					{
						img: '../../static/my/Group 3499.png',
						text: '修改密码',

						url: '/pages/index/modifyPassword',


					},
					{
						img: '../../static/my/Group 3499.png',

						text: '退出登录',

						// url: '/pages/index/modifyPassword',


					},
					{
						img: '../../static/my/Group 3500.png',
						text: 'pc端管理地址',
						pcCopy: true


					}
				],
				//1管理员 2员工
				type: null,
				merchantId: uni.getStorageSync('merchantId'),
				personalCenterHeadInfo: null,
				chartData: null,
				monet: [],
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],
				currentDates: currentDate,
				datePart: '',
				categoriesArr: [],

				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "straight",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: false,
							activeType: "hollow"
						}
					}
				}

			}
		},
		onLoad(options) {
			
			if (options.type) {
				this.type = options.type
			}

		},
		onShow() {
			this.merchantId= uni.getStorageSync('merchantId')
			this.getServerData();
			this.init()
			
		},
		onReady() {
			// this.getServerData();
		},
		computed: {

			// startDate() {
			// 	return this.getDate('start');
			// },
			// endDate() {
			// 	return this.getDate('end');
			// },
			// 时间格式化
			formattedDate() {
				return (dateTimeString) => {
					this.datePart = dateTimeString.split('T')[0];
					return this.datePart;
				};
			},
			comparisonTime() {
				return (expirationDate, currentDate) => {

					var expirationDate = new Date(expirationDate).getTime();
					var currentDate = new Date(currentDate).getTime();
					console.log(expirationDate, currentDate)
					if (currentDate > expirationDate) {
						return '已过期'
					} else {
						return '未过期'
					}

				}
			}

		},
		methods: {

			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},
			async init() {

				const result = await this.$http.post({
					url: this.$api.getPersonalCenterHeadInfo,
					data: {
						id: this.merchantId
					}
				});

				if (result.code == 2000) {
					this.personalCenterHeadInfo = result.data

				}




			},
			codyLink(link = 'https://yuntt.weijuyunke.com') {

				uni.setClipboardData({
					data: link,
					success: function() {
						console.log('复制成功');
					}
				})
			},
			async getServerData() {
				if (uni.getStorageSync('merchantId')) {
					const res = await this.$http.get({
						url: this.$api.statisticsIn7DaysOnly,
						data: {
							merchantId: this.merchantId
						}
					});
					if (res.code == 2000) {
						console.log(res.data)
						res.data.forEach((item) => {
							this.categoriesArr.push(item.createTime)
						})

						this.monet = res.data.map((item) => {
							return item.money
						})

						let ress = {
							categories: this.categoriesArr,
							series: [{
									name: "点数统计图",
									data: this.monet
								},

							]
						};
						this.chartData = JSON.parse(JSON.stringify(ress));
					} else {
						this.$sun.toast(res.msg)
					}
				}

			},
			renewFn() {

				this.$refs.renew.show({
					style: 'background-color:#fff;width:600rpx;border-radius:10rpx;',
					bottomClose: true,
					shadeClose: true,
					topclose: false
				});

				// 显示下拉框
				// this.$refs.renew.show({
				// 	anim: 'bottom',
				// 	position: 'center',
				// 	shadeClose: true, //false使用户不能点击其它关闭页面
				// 	topclose: false
				// });
			},
			goTab(item) {



				if (this.merchantId) {
					this.$sun.navGo(item.url)
				} else {
					if (item.url == '/pages/index/helpCenter') {
						console.log('帮助中心')
						console.log(item.url)
						this.$sun.navGo(item.url)
						return

					} else if (item.url == '/pages/index/legalStatement') {
						this.$sun.navGo(item.url)
						return
					}
					if (item.pcCopy) {
						this.codyLink()
					} else {
						this.$sun.navGo('/pages/index/login')
					}


				}



			},
			cancelFn() {
				this.$refs.renew.close()
			},
			pointDetails() {
				if (this.merchantId) {
					this.$sun.navGo('/pages/index/pointDetails')
				} else {
					this.$sun.navGo('/pages/index/login')
				}

			},
			openStore() {
				this.$sun.navGo('/pages/index/login')
			},
			renew() {

			}
		}
	}
</script>

<style lang="less" scoped>
	.myContainer {
		.renewPopup {

			.headTitle {
				padding: 30rpx 0rpx 30rpx 0;
				border-bottom: 2rpx solid #F6F6F6;
				text-align: center;
			}

			.contentTitle {
				padding: 50rpx 0rpx 50rpx 0;
				border-bottom: 2rpx solid #F6F6F6;

				.iconPhone {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.contentFooter {
				.confirm {
					width: 295rpx;
					height: 150rpx;
					color: #1E6CEB;
				}

				.cancel {
					width: 295rpx;
					height: 150rpx;
				}
			}

		}

		.currentRenewStatus {
			text-align: center;
			line-height: 17px;
			width: 43px;
			height: 17px;
			border-radius: 6px;
			background: #D1BB7A;
			font-size: 12px;
			color: #6C2A09;
			margin-left: 10rpx;
		}

		.backgroundImg {

			background-image: url(../../static/my/5f584b3a52ae7_02.png);
			background-repeat: no-repeat;
			background-size: cover;
			height: 266rpx;
			padding: 14rpx;

			.realNameStyle {
				display: flex;
				justify-content: start;
				align-items: center;
				margin: 36rpx 0 0 36rpx;

				.avaterName {
					width: 96rpx;
					height: 96rpx;

					border-radius: 64rpx;
					vertical-align: middle;
					margin-right: 10rpx;
				}

				.flexColumn {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 48px;

				}

			}

			.btn_status {
				text-align: center;
				line-height: 26px;
				color: #6A4714;
				width: 74px;
				height: 26px;
				background: linear-gradient(90deg, #F1E6D3 0%, #EAC899 105.95%);
				border-radius: 100px;
				margin: 36rpx 0 0 36rpx;


			}
		}

		.dataCard {

			text-align: center;
			position: relative;

			background-image: url(../../static/my/Mask group.png);
			background-repeat: no-repeat;
			background-size: cover;
			height: 294rpx;
			padding: 36rpx;
			width: 700rpx;
			color: #fff;

			transform: translateY(-35px);
			margin-left: 25rpx;

			.fontSize {
				font-size: 32rpx;
				line-height: 42rpx;

				.zero {
					font-size: 40rpx;
					margin-left: 10rpx;
					vertical-align: middle;
					font-weight: 700;
				}

				.arrow {
					width: 4px;
					height: 11px;
				}

			}

			.applicationInfo {
				margin-top: 20rpx;

				display: flex;
				align-items: center;
				justify-content: space-between;

				span {
					color: #757575;
					font-size: 18px;
				}

				.Divider {
					text-align: center;
					width: 30%;
					height: 90px;
					line-height: 40px;

					span {
						color: #fff;
						font-family: Inter;
						font-size: 14px;
						font-style: normal;
						font-weight: 400;
						line-height: normal;
					}
				}

				.boder {
					height: 45rpx;
					width: 2rpx;
					background-color: #fff;
				}

				div {
					margin: 3px 0 3px 0;
					color: #fff;

					font-size: 28rpx;
				}
			}
		}

		.graphCard {
			background-color: #fff;

			// height: 500rpx;
			margin: 0 24rpx;
			transform: translateY(-13px);
			border-radius: 10rpx;
			padding: 24rpx;

			.charts {
				width: 100%;
				height: 100%;
			}

		}

		.tabCard {
			background-color: #fff;

			margin: 0 24rpx;

			border-radius: 10rpx;
			padding: 24rpx;

			.comprehensiveScoreList {
				height: 120rpx;
				border-bottom: 2rpx solid #F5F6FB;


				.avater {
					width: 56rpx;
					height: 56rpx;
					margin-right: 18rpx;

				}

				.rightContent {
					.authorizationTitle {
						color: #000;
						font-size: 28rpx;
						font-weight: 600;
						margin-bottom: 11rpx;
					}

					.authorizationText {
						color: #666;
						font-family: Inter;
						font-size: 24rpx;
					}

				}

				.btnFinish {
					// 		width: 140rpx;
					// 		height: 64rpx;
					// 		border-radius: 76rpx;
					// 		border: 2rpx solid #D9D9D9;

					// 		background: #FFF;
					.arrowImg {
						width: 46rpx;
						height: 46rpx;
					}

					.codyImg {
						margin-left: 10rpx;
						width: 28rpx;
						height: 28rpx;
					}

				}



			}

		}


	}
</style>